<template>
    <div class="support-ticket">
      <!-- 动态背景 -->
      <div class="animated-bg">
        <div class="light-beam"></div>
        <div class="particles"></div>
        <div class="cyber-grid"></div>
      </div>
  
      <!-- 头部统计卡片 -->
      <div class="stats-cards">
        <div class="stat-card" v-for="stat in statistics" :key="stat.id">
          <div class="stat-icon" :class="stat.trend">
            <i :class="stat.icon"></i>
          </div>
          <div class="stat-info">
            <div class="stat-value">{{ stat.value }}</div>
            <div class="stat-label">{{ stat.label }}</div>
          </div>
          <div class="stat-trend" :class="stat.trend">
            <i :class="getTrendIcon(stat.trend)"></i>
            {{ stat.percentage }}%
          </div>
        </div>
      </div>
  
      <!-- 工单筛选器 -->
      <div class="filter-section glass-effect">
        <div class="filter-grid">
          <div class="filter-item">
            <label>工单状态</label>
            <el-select v-model="filters.status" placeholder="选择状态" clearable>
              <el-option
                v-for="status in ticketStatuses"
                :key="status.value"
                :label="status.label"
                :value="status.value"
              >
                <i :class="status.icon"></i>
                {{ status.label }}
              </el-option>
            </el-select>
          </div>
  
          <div class="filter-item">
            <label>优先级</label>
            <el-select v-model="filters.priority" placeholder="选择优先级" clearable>
              <el-option
                v-for="priority in priorities"
                :key="priority.value"
                :label="priority.label"
                :value="priority.value"
              >
                <i :class="priority.icon"></i>
                {{ priority.label }}
              </el-option>
            </el-select>
          </div>
  
          <div class="filter-item">
            <label>时间范围</label>
            <el-date-picker
              v-model="filters.dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </div>
  
          <div class="filter-item">
            <label>搜索</label>
            <el-input 
              v-model="filters.search"
              placeholder="搜索工单号/标题/提交人"
              prefix-icon="el-icon-search"
              clearable
            />
          </div>
        </div>
  
        <div class="filter-actions">
          <el-button type="primary" @click="applyFilters">
            <i class="fas fa-filter"></i>
            应用筛选
          </el-button>
          <el-button @click="resetFilters">
            <i class="fas fa-redo"></i>
            重置
          </el-button>
        </div>
      </div>
  
      <!-- 工单列表 -->
      <div class="tickets-container glass-effect">
        <div class="tickets-header">
          <h2>工单列表</h2>
          <div class="view-toggle">
            <button 
              :class="['view-btn', { active: viewMode === 'list' }]"
              @click="viewMode = 'list'"
            >
              <i class="fas fa-list"></i>
            </button>
            <button 
              :class="['view-btn', { active: viewMode === 'card' }]"
              @click="viewMode = 'card'"
            >
              <i class="fas fa-th-large"></i>
            </button>
          </div>
        </div>
  
        <!-- 列表视图 -->
        <transition name="fade-slide" mode="out-in">
          <div v-if="viewMode === 'list'" class="tickets-list" key="list">
            <div 
              v-for="ticket in filteredTickets" 
              :key="ticket.id"
              class="ticket-item"
              @click="openTicketDetail(ticket)"
            >
              <div class="ticket-status">
                <div :class="['status-dot', getStatusClass(ticket.status)]"></div>
              </div>
              
              <div class="ticket-main">
                <div class="ticket-header">
                  <h3>{{ ticket.title }}</h3>
                  <span class="ticket-id">#{{ ticket.id }}</span>
                </div>
                <p class="ticket-desc">{{ ticket.description }}</p>
                <div class="ticket-meta">
                  <span class="meta-item">
                    <i class="fas fa-user-circle"></i>
                    {{ ticket.submitter }}
                  </span>
                  <span class="meta-item">
                    <i class="far fa-calendar-alt"></i>
                    {{ formatDate(ticket.createTime) }}
                  </span>
                  <span class="meta-item problem-status" :style="{ color: problemStatusConfig[ticket.finished].color }">
                    <i :class="problemStatusConfig[ticket.finished].icon"></i>
                    {{ problemStatusConfig[ticket.finished].label }}
                  </span>
                  <span class="meta-item ticket-status" :style="{ color: getStatusColor(ticket.status) }">
                    <i :class="getStatusIcon(ticket.status)"></i>
                    {{ getStatusLabel(ticket.status) }}
                  </span>
                  <span class="meta-item priority" :style="{ color: priorityConfig[ticket.priority].color }">
                    <i :class="priorityConfig[ticket.priority].icon"></i>
                    {{ priorityConfig[ticket.priority].label }}
                  </span>
                </div>
              </div>
  
              <div class="ticket-actions">
                <el-dropdown trigger="click" @command="handleCommand($event, ticket)">
                  <i class="fas fa-ellipsis-v"></i>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item command="process">
                        <i class="fas fa-play"></i> 处理
                      </el-dropdown-item>
                      <el-dropdown-item command="transfer">
                        <i class="fas fa-exchange-alt"></i> 转交
                      </el-dropdown-item>
                      <el-dropdown-item command="close">
                        <i class="fas fa-times"></i> 关闭
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </div>
          </div>
  
          <!-- 卡片视图 -->
          <div v-else class="tickets-grid" key="grid">
            <div 
              v-for="ticket in filteredTickets" 
              :key="ticket.id"
              class="ticket-card"
              @click="openTicketDetail(ticket)"
            >
              <div class="card-header">
                <div :class="['status-indicator', getStatusClass(ticket.status)]">
                  {{ getStatusLabel(ticket.status) }}
                </div>
                <span class="ticket-id">#{{ ticket.id }}</span>
              </div>
  
              <div class="card-content">
                <h3>{{ ticket.title }}</h3>
                <p>{{ ticket.description }}</p>
              </div>
  
              <div class="card-footer">
                <div class="submitter-info">
                  <el-avatar :size="32" :src="ticket.submitterAvatar"></el-avatar>
                  <span>{{ ticket.submitter }}</span>
                </div>
                <span :class="['priority-badge', getPriorityClass(ticket.priority)]">
                  {{ getPriorityLabel(ticket.priority) }}
                </span>
              </div>
            </div>
          </div>
        </transition>
  
        <!-- 分页器 -->
        <div class="pagination-section">
          <el-pagination
            :current-page="currentPage"
            :page-size="pageSize"
            :total="totalTickets"
            :page-sizes="[10, 20, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
  
      <!-- 工单详情对话框 -->
      <el-dialog
        :title="`工单详情 #${selectedTicket && selectedTicket.id}`"
        :visible.sync="showTicketDetail"
        width="70%"
        class="ticket-dialog"
        :close-on-click-modal="false"
      >
        <div v-if="selectedTicket" class="ticket-detail">
          <!-- 详情头部 -->
          <div class="detail-header glass-effect">
            <div class="header-main">
              <div class="title-section">
                <h2>{{ selectedTicket.title }}</h2>
                <div class="ticket-badges">
                  <span class="badge status" :style="{ color: getStatusColor(selectedTicket.status) }">
                    <i :class="getStatusIcon(selectedTicket.status)"></i>
                    {{ getStatusLabel(selectedTicket.status) }}
                  </span>
                  <span class="badge priority" :style="{ color: priorityConfig[selectedTicket.priority].color }">
                    <i :class="priorityConfig[selectedTicket.priority].icon"></i>
                    {{ priorityConfig[selectedTicket.priority].label }}优先级
                  </span>
                  <span class="badge problem" :style="{ color: problemStatusConfig[selectedTicket.finished].color }">
                    <i :class="problemStatusConfig[selectedTicket.finished].icon"></i>
                    {{ problemStatusConfig[selectedTicket.finished].label }}
                  </span>
                </div>
              </div>
              <div class="meta-info">
                <div class="meta-item">
                  <i class="fas fa-user-circle"></i>
                  <span>提交人：{{ selectedTicket.submitter }}</span>
                </div>
                <div class="meta-item">
                  <i class="far fa-calendar-alt"></i>
                  <span>创建时间：{{ formatDate(selectedTicket.createTime) }}</span>
                </div>
                <div class="meta-item">
                  <i class="fas fa-clock"></i>
                  <span>处理时间：{{ selectedTicket.finishTime }}</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 详情内容 -->
          <div class="detail-content">
            <div class="description-section glass-effect">
              <h3><i class="fas fa-file-alt"></i> 问题描述</h3>
              <div class="description-content">
                {{ selectedTicket.description }}
              </div>
            </div>

            <div class="timeline-section glass-effect">
              <h3><i class="fas fa-history"></i> 处理记录</h3>
              <div class="timeline">
                <div 
                  v-for="(record, index) in selectedTicket.timeline" 
                  :key="index"
                  class="timeline-item"
                >
                  <div class="timeline-icon">
                    <i :class="getTimelineIcon(record.type)"></i>
                  </div>
                  <div class="timeline-content">
                    <div class="timeline-header">
                      <span class="action">{{ record.action }}</span>
                      <span class="time">{{ formatDate(record.time) }}</span>
                    </div>
                    <p class="comment">{{ record.comment }}</p>
                    <div class="operator">
                      <el-avatar :size="24" :src="record.operatorAvatar"></el-avatar>
                      <span>{{ record.operator }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 回复区域 -->
          <div class="detail-footer glass-effect">
            <div class="reply-section">
              <h3><i class="fas fa-reply"></i> 处理回复</h3>
              <el-input
                v-model="replyContent"
                type="textarea"
                :rows="3"
                placeholder="请输入处理意见..."
                resize="none"
              />
              <div class="reply-actions">
                <el-button type="primary" @click="submitReply">
                  <i class="fas fa-paper-plane"></i>
                  提交回复
                </el-button>
                <el-button @click="showTicketDetail = false">
                  <i class="fas fa-times"></i>
                  关闭
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </el-dialog>
  
      <!-- 转交工单对话框 -->
      <el-dialog
        title="转交工单"
        :visible.sync="showTransferDialog"
        width="30%"
      >
        <div class="transfer-content">
          <el-form :model="transferForm" label-width="80px">
            <el-form-item label="转交给">
              <el-select v-model="transferForm.assignee" placeholder="选择处理人">
                <el-option
                  v-for="user in supportStaff"
                  :key="user.id"
                  :label="user.name"
                  :value="user.id"
                >
                  <div class="user-option">
                    <el-avatar :size="24" :src="user.avatar"></el-avatar>
                    <span>{{ user.name }}</span>
                    <span class="department">{{ user.department }}</span>
                  </div>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="转交原因">
              <el-input
                v-model="transferForm.reason"
                type="textarea"
                :rows="3"
                placeholder="请输入转交原因"
              />
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="showTransferDialog = false">取消</el-button>
          <el-button type="primary" @click="confirmTransfer">确认转交</el-button>
        </span>
      </el-dialog>
  
      <!-- 全局提示 -->
      <div class="toast" :class="{ 'show': showToast }">
        {{ toastMessage }}
      </div>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  
  export default {
    name: 'SupportTicket',
    data() {
      return {
        // 统计数据
        statistics: [
          {
            id: 1,
            icon: 'fas fa-ticket-alt',
            value: '128',
            label: '待处理工单',
            trend: 'up',
            percentage: 15
          },
          {
            id: 2,
            icon: 'fas fa-clock',
            value: '45',
            label: '平均响应时间(分钟)',
            trend: 'down',
            percentage: 8
          },
          {
            id: 3,
            icon: 'fas fa-check-circle',
            value: '94.5%',
            label: '满意度',
            trend: 'up',
            percentage: 3
          },
          {
            id: 4,
            icon: 'fas fa-users',
            value: '1,234',
            label: '本月服务用户',
            trend: 'up',
            percentage: 12
          }
        ],
  
        // 筛选条件
        filters: {
          status: '',
          priority: '',
          dateRange: null,
          search: ''
        },
  
        // 视图模式
        viewMode: 'list',
  
        // 分页相关
        currentPage: 1,
        pageSize: 10,
        totalTickets: 0,
  
        // 工单数据
        tickets: [],
        selectedTicket: null,
  
        // 对话框控制
        showTicketDetail: false,
        showTransferDialog: false,
  
        // 回复内容
        replyContent: '',
  
        // 转交表单
        transferForm: {
          assignee: '',
          reason: ''
        },
  
        // 客服人员列表
        supportStaff: [
          {
            id: 1,
            name: '张三',
            avatar: 'avatar1.jpg',
            department: '技术支持部'
          },
          {
            id: 2,
            name: '李四',
            avatar: 'avatar2.jpg',
            department: '客户服务部'
          }
        ],
  
        // 状态和优先级选项
        ticketStatuses: [
          { value: '0', label: '已撤销', icon: 'fas fa-ban', color: '#f44336' },
          { value: '1', label: '待关闭', icon: 'fas fa-hourglass-half', color: '#ff9800' }
        ],
  
        priorities: [
          { value: 'high', label: '高', icon: 'fas fa-exclamation-circle' },
          { value: 'medium', label: '中', icon: 'fas fa-exclamation' },
          { value: 'low', label: '低', icon: 'fas fa-info-circle' }
        ],
  
        // 提示相关
        showToast: false,
        toastMessage: '',
  
        // 添加问题处理状态映射
        problemStatuses: {
          0: '问题生成',
          1: '处理中',
          2: '已解决'
        },
  
        // 问题处理状态配置
        problemStatusConfig: {
          0: { label: '问题生成', icon: 'fas fa-file-alt', color: '#9c27b0' },
          1: { label: '处理中', icon: 'fas fa-cog fa-spin', color: '#2196f3' },
          2: { label: '已解决', icon: 'fas fa-check-circle', color: '#4caf50' }
        },
  
        // 优先级配置
        priorityConfig: {
          high: { label: '高', icon: 'fas fa-exclamation-circle', color: '#f44336' },
          medium: { label: '中', icon: 'fas fa-exclamation', color: '#ff9800' },
          low: { label: '低', icon: 'fas fa-info-circle', color: '#4caf50' }
        },
      };
    },
  
    computed: {
      filteredTickets() {
        return this.tickets.filter(ticket => {
          const matchStatus = !this.filters.status || ticket.status === this.filters.status;
          const matchPriority = !this.filters.priority || ticket.priority === this.filters.priority;
          const matchSearch = !this.filters.search || 
            ticket.title.toLowerCase().includes(this.filters.search.toLowerCase()) ||
            ticket.id.toString().includes(this.filters.search) ||
            ticket.submitter.toLowerCase().includes(this.filters.search.toLowerCase());
  
          return matchStatus && matchPriority && matchSearch;
        });
      }
    },
  
    methods: {
      // 获取工单列表
      async fetchTickets() {
        try {
          let params = {
            page: this.currentPage,
            pageSize: this.pageSize,
            status: this.filters.status,
            priority: this.filters.priority,
            search: this.filters.search
          };
  
          if (this.filters.dateRange && this.filters.dateRange.length === 2) {
            params.startDate = this.filters.dateRange[0];
            params.endDate = this.filters.dateRange[1];
          }
  
          const response = await axios.get('/api/system/tickets', {
            params: params
          });
  
          if (response.data.code === 200) {
            // 转换后端数据格式为前端所需格式
            this.tickets = response.data.data.map(item => ({
              id: item.ploblemId,
              title: item.title,
              description: item.description,
              status: item.status.toString(), // 工单状态
              finished: item.finished, // 问题处理状态
              priority: item.urgency,
              submitter: item.userName,
              createTime: item.createTime,
              finishTime: item.finishTime || '待解决'
            }));
            this.totalTickets = response.data.data.length;
          }
        } catch (error) {
          this.showToastMessage('获取工单列表失败');
          console.error('获取工单列表失败:', error);
        }
      },
  
      // 处理工单操作
      async handleCommand(command, ticket) {
        switch (command) {
          case 'process':
            this.openTicketDetail(ticket);
            break;
          case 'transfer':
            this.showTransferDialog = true;
            this.selectedTicket = ticket;
            break;
          case 'close':
            await this.closeTicket(ticket);
            break;
        }
      },
  
      // 关闭工单
      async closeTicket(ticket) {
        try {
          const response = await axios.post(`/api/system/tickets/${ticket.id}/close`);
          if (response.data.code === 200) {
            this.showToastMessage('工单已关闭');
            this.fetchTickets();
          }
        } catch (error) {
          this.showToastMessage('关闭工单失败');
        }
      },
  
      // 提交回复
      async submitReply() {
        if (!this.replyContent.trim()) {
          this.showToastMessage('请输入回复内容');
          return;
        }
  
        try {
          const response = await axios.post(`/api/tickets/${this.selectedTicket.id}/reply`, {
            content: this.replyContent
          });
  
          if (response.data.code === 200) {
            this.showToastMessage('回复成功');
            this.replyContent = '';
            this.fetchTicketDetail(this.selectedTicket.id);
          }
        } catch (error) {
          this.showToastMessage('回复失败');
        }
      },
  
      // 确认转交
      async confirmTransfer() {
        if (!this.transferForm.assignee) {
          this.showToastMessage('请选择转交对象');
          return;
        }
  
        try {
          const response = await axios.post(`/api/tickets/${this.selectedTicket.id}/transfer`, this.transferForm);
          
          if (response.data.code === 200) {
            this.showToastMessage('转交成功');
            this.showTransferDialog = false;
            this.fetchTickets();
          }
        } catch (error) {
          this.showToastMessage('转交失败');
        }
      },
  
      // 获取工单详情
      async fetchTicketDetail(ticketId) {
        try {
          const response = await axios.get(`/api/tickets/${ticketId}`);
          if (response.data.code === 200) {
            this.selectedTicket = response.data.data;
          }
        } catch (error) {
          this.showToastMessage('获取工单详情失败');
        }
      },
  
      // 打开工单详情
      openTicketDetail(ticket) {
        this.selectedTicket = ticket;
        this.showTicketDetail = true;
        this.fetchTicketDetail(ticket.id);
      },
  
      // 应用筛选
      applyFilters() {
        this.currentPage = 1;
        this.fetchTickets();
      },
  
      // 重置筛选
      resetFilters() {
        this.filters = {
          status: '',
          priority: '',
          dateRange: null,
          search: ''
        };
        this.applyFilters();
      },
  
      // 处理分页
      handleSizeChange(val) {
        this.pageSize = val;
        this.currentPage = 1;
        this.fetchTickets();
      },
  
      handleCurrentChange(val) {
        this.currentPage = val;
        this.fetchTickets();
      },
  
      // 工具方法
      getTrendIcon(trend) {
        return {
          up: 'fas fa-arrow-up',
          down: 'fas fa-arrow-down',
          stable: 'fas fa-equals'
        }[trend];
      },
  
      getStatusClass(status) {
        return {
          pending: 'status-pending',
          processing: 'status-processing',
          resolved: 'status-resolved',
          closed: 'status-closed'
        }[status];
      },
  
      getStatusLabel(status) {
        const statusItem = this.ticketStatuses.find(item => item.value === status);
        return statusItem ? statusItem.label : '未知状态';
      },
  
      getPriorityClass(priority) {
        return {
          high: 'priority-high',
          medium: 'priority-medium',
          low: 'priority-low'
        }[priority];
      },
  
      getPriorityLabel(priority) {
        return {
          high: '高',
          medium: '中',
          low: '低'
        }[priority];
      },
  
      getTimelineIcon(type) {
        return {
          create: 'fas fa-plus-circle',
          reply: 'fas fa-comment',
          transfer: 'fas fa-exchange-alt',
          close: 'fas fa-times-circle'
        }[type];
      },
  
      formatDate(date) {
        return new Date(date).toLocaleString();
      },
  
      showToastMessage(message) {
        this.toastMessage = message;
        this.showToast = true;
        setTimeout(() => {
          this.showToast = false;
        }, 3000);
      },
  
      // 添加问题处理状态显示方法
      getProblemStatusLabel(finished) {
        return this.problemStatuses[finished] || '未知状态';
      },
  
      getStatusIcon(status) {
        const statusItem = this.ticketStatuses.find(item => item.value === status);
        return statusItem ? statusItem.icon : 'fas fa-question-circle';
      },
  
      getStatusColor(status) {
        const statusItem = this.ticketStatuses.find(item => item.value === status);
        return statusItem ? statusItem.color : '#999';
      },
  
      getProblemStatusLabel(finished) {
        return this.problemStatusConfig[finished]?.label || '未知状态';
      },
  
      getPriorityLabel(priority) {
        return this.priorityConfig[priority]?.label || '未知优先级';
      }
    },
  
    created() {
      this.fetchTickets();
    }
  };
  </script>
  
  <style scoped>
  /* 基础样式 */
  .support-ticket {
    min-height: 100vh;
    padding: 2rem;
    background: #f0f2f5;
    position: relative;
  }
  
  /* 动态背景 */
  .animated-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
  }
  
  .light-beam {
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    background: linear-gradient(
      45deg,
      rgba(66, 133, 244, 0.1) 0%,
      rgba(66, 133, 244, 0.05) 100%
    );
    animation: rotate 20s linear infinite;
  }
  
  .particles {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle at center, #4285f4 1px, transparent 1px);
    background-size: 50px 50px;
    animation: float 20s linear infinite;
  }
  
  .cyber-grid {
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    background-image: 
      linear-gradient(rgba(66, 133, 244, 0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(66, 133, 244, 0.05) 1px, transparent 1px);
    background-size: 30px 30px;
    animation: grid-move 20s linear infinite;
  }
  
  /* 统计卡片 */
  .stats-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
  }
  
  .stat-card {
    background: white;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: transform 0.3s ease;
  }
  
  .stat-card:hover {
    transform: translateY(-5px);
  }
  
  .stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
  }
  
  .stat-info {
    flex: 1;
  }
  
  .stat-value {
    font-size: 1.5rem;
    font-weight: bold;
    color: #1a237e;
  }
  
  .stat-label {
    font-size: 0.9rem;
    color: #666;
    margin-top: 0.25rem;
  }
  
  .stat-trend {
    padding: 0.25rem 0.5rem;
    border-radius: 20px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }
  
  .stat-trend.up {
    background: rgba(76, 175, 80, 0.1);
    color: #4caf50;
  }
  
  .stat-trend.down {
    background: rgba(244, 67, 54, 0.1);
    color: #f44336;
  }
  
  /* 筛器区域样式优化 */
  .filter-section {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.4);
    transition: all 0.3s ease;
  }
  
  .filter-section:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
  }
  
  .filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
  }
  
  .filter-item {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .filter-item label {
    font-size: 0.9rem;
    font-weight: 500;
    color: #1a237e;
    margin-left: 0.25rem;
  }
  
  /* 下拉框样式 */
  .el-select {
    width: 100%;
  }
  
  .el-select :deep(.el-input__wrapper) {
    border-radius: 8px;
    border: 1px solid #e0e7ff;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.8);
  }
  
  .el-select :deep(.el-input__wrapper:hover) {
    border-color: #4285f4;
    box-shadow: 0 0 0 1px rgba(66, 133, 244, 0.1);
  }
  
  .el-select :deep(.el-input__wrapper.is-focus) {
    border-color: #4285f4;
    box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.2);
  }
  
  /* 日期选择器样式 */
  .el-date-editor {
    width: 100% !important;
  }
  
  .el-date-editor :deep(.el-input__wrapper) {
    border-radius: 8px;
    border: 1px solid #e0e7ff;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.8);
  }
  
  .el-date-editor :deep(.el-input__wrapper:hover) {
    border-color: #4285f4;
    box-shadow: 0 0 0 1px rgba(66, 133, 244, 0.1);
  }
  
  /* 搜索输入框样式 */
  .el-input :deep(.el-input__wrapper) {
    border-radius: 8px;
    border: 1px solid #e0e7ff;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.8);
  }
  
  .el-input :deep(.el-input__wrapper:hover) {
    border-color: #4285f4;
    box-shadow: 0 0 0 1px rgba(66, 133, 244, 0.1);
  }
  
  .el-input :deep(.el-input__wrapper.is-focus) {
    border-color: #4285f4;
    box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.2);
  }
  
  /* 按钮区域样式 */
  .filter-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(66, 133, 244, 0.1);
  }
  
  .filter-actions .el-button {
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
  }
  
  .filter-actions .el-button--primary {
    background: linear-gradient(135deg, #4285f4, #3367d6);
    border: none;
    box-shadow: 0 4px 12px rgba(66, 133, 244, 0.3);
  }
  
  .filter-actions .el-button--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(66, 133, 244, 0.4);
  }
  
  .filter-actions .el-button--default {
    border: 1px solid #e0e7ff;
    background: rgba(255, 255, 255, 0.8);
  }
  
  .filter-actions .el-button--default:hover {
    border-color: #4285f4;
    color: #4285f4;
    background: rgba(66, 133, 244, 0.05);
  }
  
  /* 图标样式 */
  .filter-actions .el-button i {
    margin-right: 0.5rem;
    font-size: 1rem;
  }
  
  /* 响应式调整 */
  @media (max-width: 768px) {
    .filter-section {
      padding: 1.5rem;
    }
    
    .filter-grid {
      grid-template-columns: 1fr;
      gap: 1rem;
    }
    
    .filter-actions {
      flex-direction: column;
    }
    
    .filter-actions .el-button {
      width: 100%;
    }
  }
  
  /* 工单列表容器 */
  .tickets-container {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  }
  
  .tickets-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
  }
  
  .view-toggle {
    display: flex;
    gap: 0.5rem;
  }
  
  .view-btn {
    padding: 0.5rem;
    border: none;
    background: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  
  .view-btn.active {
    background: #1a237e;
    color: white;
  }
  
  /* 列表视图 */
  .ticket-item {
    display: flex;
    align-items: flex-start;
    padding: 1.5rem;
    border-bottom: 1px solid #eee;
    transition: all 0.3s ease;
    cursor: pointer;
  }
  
  .ticket-item:hover {
    background: #f8f9fa;
  }
  
  .status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 1rem;
    margin-top: 0.5rem;
  }
  
  .ticket-main {
    flex: 1;
  }
  
  .ticket-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
  }
  
  .ticket-id {
    font-size: 0.9rem;
    color: #666;
  }
  
  .ticket-desc {
    color: #666;
    margin-bottom: 1rem;
  }
  
  .ticket-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.9rem;
    color: #666;
  }
  
  /* 卡片视图 */
  .tickets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
  }
  
  .ticket-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    cursor: pointer;
  }
  
  .ticket-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
  }
  
  .status-indicator {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.9rem;
  }
  
  .card-content {
    margin-bottom: 1.5rem;
  }
  
  .card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .submitter-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  
  /* 状态样式 */
  .status-pending {
    background: rgba(255, 152, 0, 0.1);
    color: #ff9800;
  }
  
  .status-processing {
    background: rgba(33, 150, 243, 0.1);
    color: #2196f3;
  }
  
  .status-resolved {
    background: rgba(76, 175, 80, 0.1);
    color: #4caf50;
  }
  
  .status-closed {
    background: rgba(158, 158, 158, 0.1);
    color: #9e9e9e;
  }
  
  /* 优先级样式 */
  .priority-high {
    background: rgba(244, 67, 54, 0.1);
    color: #f44336;
  }
  
  .priority-medium {
    background: rgba(255, 152, 0, 0.1);
    color: #ff9800;
  }
  
  .priority-low {
    background: rgba(76, 175, 80, 0.1);
    color: #4caf50;
  }
  
  /* 动画 */
  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  
  @keyframes float {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(-30px);
    }
  }
  
  @keyframes grid-move {
    from {
      transform: translate(0, 0);
    }
    to {
      transform: translate(30px, 30px);
    }
  }
  
  /* 过渡动画 */
  .fade-slide-enter-active,
  .fade-slide-leave-active {
    transition: all 0.3s ease;
  }
  
  .fade-slide-enter,
  .fade-slide-leave-to {
    opacity: 0;
    transform: translateY(20px);
  }
  
  /* Toast 样式 */
  .toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    font-size: 0.9rem;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
  }
  
  .toast.show {
    opacity: 1;
  }
  
  .status-tag {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.85rem;
    margin-right: 8px;
  }
  
  .status-tag.status-0 {
    background: rgba(244, 67, 54, 0.1);
    color: #f44336;
  }
  
  .status-tag.status-1 {
    background: rgba(255, 152, 0, 0.1);
    color: #ff9800;
  }
  
  /* 元数据项样式 */
  .meta-item {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
  }
  
  .meta-item:hover {
    background: rgba(0, 0, 0, 0.08);
  }
  
  .meta-item i {
    margin-right: 6px;
    font-size: 14px;
  }
  
  /* 问题状态样式 */
  .problem-status {
    font-weight: 500;
  }
  
  .problem-status i {
    animation: pulse 2s infinite;
  }
  
  /* 工单状态样式 */
  .ticket-status {
    font-weight: 500;
  }
  
  /* 优先级样式 */
  .priority {
    font-weight: 500;
  }
  
  /* 工单项悬停效果 */
  .ticket-item {
    border-left: 4px solid transparent;
    transition: all 0.3s ease;
  }
  
  .ticket-item:hover {
    border-left-color: #4285f4;
    background: rgba(66, 133, 244, 0.05);
  }
  
  /* 添加动画 */
  @keyframes pulse {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
    100% {
      transform: scale(1);
    }
  }
  
  /* 卡片视图样式增强 */
  .ticket-card {
    border-top: 4px solid transparent;
    transition: all 0.3s ease;
  }
  
  .ticket-card:hover {
    border-top-color: #4285f4;
  }
  
  .card-header .status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: 500;
  }
  
  .card-header .status-indicator i {
    font-size: 14px;
  }
  
  /* 统计卡片样式增强 */
  .stat-card {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid rgba(66, 133, 244, 0.1);
  }
  
  .stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(66, 133, 244, 0.05), rgba(66, 133, 244, 0));
    z-index: 0;
  }
  
  .stat-icon {
    position: relative;
    z-index: 1;
    background: rgba(66, 133, 244, 0.1);
  }
  
  .stat-info {
    position: relative;
    z-index: 1;
  }
  
  /* 工单详情对话框样式 */
  .ticket-dialog {
    :deep(.el-dialog__header) {
      padding: 20px 24px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      margin: 0;
    }

    :deep(.el-dialog__body) {
      padding: 0;
    }

    :deep(.el-dialog__title) {
      font-size: 1.25rem;
      font-weight: 600;
      color: #1a237e;
    }
  }

  .ticket-detail {
    background: #f8f9fa;
    min-height: 60vh;
  }

  /* 详情头部样式 */
  .detail-header {
    padding: 24px;
    background: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }

  .header-main {
    .title-section {
      margin-bottom: 16px;

      h2 {
        font-size: 1.5rem;
        color: #1a237e;
        margin-bottom: 12px;
      }
    }

    .ticket-badges {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;

      .badge {
        display: inline-flex;
        align-items: center;
        padding: 6px 12px;
        border-radius: 20px;
        font-weight: 500;
        background: rgba(0, 0, 0, 0.05);
        
        i {
          margin-right: 6px;
          font-size: 14px;
        }
      }
    }

    .meta-info {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 16px;
      margin-top: 16px;

      .meta-item {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #666;

        i {
          font-size: 16px;
        }
      }
    }
  }

  /* 详情内容样式 */
  .detail-content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .description-section, .timeline-section {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    padding: 20px;

    h3 {
      font-size: 1.1rem;
      color: #1a237e;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
  }

  .description-content {
    color: #333;
    line-height: 1.6;
    padding: 16px;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 8px;
  }

  /* 时间线样式 */
  .timeline {
    position: relative;
    padding-left: 24px;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 2px;
      background: rgba(66, 133, 244, 0.2);
    }
  }

  .timeline-item {
    position: relative;
    padding-bottom: 24px;

    &:last-child {
      padding-bottom: 0;
    }

    .timeline-icon {
      position: absolute;
      left: -34px;
      width: 24px;
      height: 24px;
      background: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #4285f4;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .timeline-content {
      background: white;
      border-radius: 8px;
      padding: 16px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

      .timeline-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 8px;
        
        .action {
          font-weight: 500;
          color: #1a237e;
        }
        
        .time {
          color: #666;
          font-size: 0.9rem;
        }
      }

      .comment {
        color: #333;
        margin-bottom: 12px;
      }

      .operator {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #666;
        font-size: 0.9rem;
      }
    }
  }

  /* 回复区域样式 */
  .detail-footer {
    padding: 24px;
    background: rgba(255, 255, 255, 0.9);
    border-top: 1px solid rgba(0, 0, 0, 0.1);

    .reply-section {
      h3 {
        font-size: 1.1rem;
        color: #1a237e;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        gap: 8px;
      }
    }

    .reply-actions {
      display: flex;
      justify-content: flex-end;
      gap: 12px;
      margin-top: 16px;

      .el-button {
        padding: 10px 20px;
        
        i {
          margin-right: 6px;
        }
      }
    }
  }

  /* 玻璃效果 */
  .glass-effect {
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
  </style>